import React,{useEffect,useState} from 'react';
import { Card,Button,Table,Pagination,Modal} from 'antd';
import { PlusOutlined,FormOutlined,DeleteOutlined} from '@ant-design/icons';
import {useSelectorBrand,getTrademarkListAsync} from '@/store/slices/brand';
import { useDispatch } from 'react-redux';
import {Tdispatch} from '@/store';




function Brand() {
    const dispatch = useDispatch<Tdispatch>();
    const {brandList:{data}} = useSelectorBrand();
    console.log(data&&data.records&&data.total)

    //对应当前页的数量
    const [page,pageSize] = useState(1)
    //对应当前展示数量
    const [limit,limitSize] = useState(3)
    //页面挂载完成发送请求
    useEffect(()=>{
        dispatch(getTrademarkListAsync(page,limit));
    },[]);

    //对话框点击添加
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
   

  };

    return (
        <Card style={{ width: 1300 }}>
            <Button icon={<PlusOutlined />} type="primary" style={{ marginBottom: 40 }}>
                添加
            </Button>
            <Table
                bordered={true}
                style={{ marginBottom: 40 }}
                
                columns={[
                    {
                        title:"序号",
                        align:"center",
                        dataIndex:'id',
                        width:100

                    },{
                        title:"品牌名称",
                        dataIndex:'tmName',
                        width:500
                        
                        
                    },{
                        title:"品牌logo",
                        dataIndex:'',
                        key: "logoUrl",
                        align:"center",
                        render:(record)=>{
                            return (
                                <img
                                src={record.logoUrl}
                                alt=''
                                style={
                                    {
                                        width:'50px',
                                        height:'50px',
                                        borderRadius:'50%',
                                    }
                                }
                                />
                            )
                        },
                        width:350
                        
                    },{
                        title:"操作",
                        dataIndex:'',
                        render:(record)=>{
                            return (
                            <div>
                            <Button icon={<FormOutlined />} type="primary" style={{ marginRight: 20 }}>
                                修改
                            </Button>
                            <Button icon={<DeleteOutlined />} type="primary">
                                删除
                            </Button>  
                            </div>
                           
                            )
                        },
                        width:350
                        
                        
                    }
                ]}
                rowKey={"id"}
                dataSource={data&&data.records}
            />

            <Pagination
                onChange={(current,size)=>{
                    pageSize(current);
                    limitSize(size);
                    dispatch(getTrademarkListAsync(current,size))

                }}
                showSizeChanger
                // onShowSizeChange={onShowSizeChange}
                defaultCurrent={1}
                total={data&&data.total}
                pageSizeOptions={["3", "5", "7"]}
            />
            <Modal
          title="添加按钮"
          open={isModalOpen}
        ></Modal>
        </Card>
    );
};

export default Brand;